<template>
  <div class="order-pay">
    <div class="container">
      <div class="order-wrap">
        <div class="item-order">
          <div class="icon-succ"></div>
          <div class="order-info">
            <h2>订单提交成功！去付款咯～</h2>
            <p>请在<span>30分</span>内完成支付, 超时后将取消订单</p>
            <p>收货信息：{{ addressInfo }}</p>
          </div>
          <div class="order-total">
            <p>
              应付总额：<span>{{ payment }}</span
              >元
            </p>
            <p>
              订单详情<em
                class="icon-down"
                :class="{ up: showDetail }"
                @click="showDetail = !showDetail"
              ></em>
            </p>
          </div>
        </div>
        <div class="item-detail" v-if="showDetail">
          <div class="item">
            <div class="detail-title">订单号：</div>
            <div class="detail-info theme-color">{{ orderId }}</div>
          </div>
          <div class="item">
            <div class="detail-title">收货信息：</div>
            <div class="detail-info">{{ addressInfo }}</div>
          </div>
          <div class="item good">
            <div class="detail-title">商品名称：</div>
            <div class="detail-info">
              <ul>
                <li v-for="(item, index) in orderDetail" :key="index">
                  <img v-lazy="item.productImage" />{{ item.productName }}
                </li>
              </ul>
            </div>
          </div>
          <div class="item">
            <div class="detail-title">发票信息：</div>
            <div class="detail-info">电子发票 个人</div>
          </div>
        </div>
      </div>
      <div class="item-pay">
        <h3>选择以下支付方式付款</h3>
        <div class="pay-way">
          <p>支付平台</p>
          <div
            class="pay pay-ali"
            @click="paySubmit(1)"
            :class="{ checked: payType == 1 }"
          ></div>
          <div
            class="pay pay-wechat"
            @click="paySubmit(2)"
            :class="{ checked: payType == 2 }"
          ></div>
        </div>
      </div>
    </div>
    <ScanPayCode v-if="showPayWX" @close="close" :img="payImg"></ScanPayCode>
    <Modal
      title="支付确认"
      btnType="3"
      v-if="showPayModal"
      sureText="查看订单"
      cancelText="未支付"
      @close="showPayModal = false"
      @submit="submit"
    >
      <template slot="body">
        <p>您确认是否完成支付？</p>
      </template>
    </Modal>
  </div>
</template>

<script>
import qrcode from "qrcode";
import requests from "@/api/ajax";
import ScanPayCode from "@/components/ScanPayCode.vue";
export default {
  components: { ScanPayCode },
  // eslint-disable-next-line vue/multi-word-component-names
  name: "orderPay",

  data() {
    return {
      orderId: this.$route.query.orderId,
      addressInfo: "", //收货人地址
      orderDetail: [], //订单详情，包含商品列表
      showDetail: true, //是否显示订单详情
      payType: "", //支付类型
      showPayWX: false, //是否显示微信支付弹框
      payImg: "", //微信支付的二维码地址
      showPayModal: false, //是否显示二次支付确认弹框
      payment: 0, //订单总金额
      shippingVo: {},
      content: "",
    };
  },

  mounted() {
    this.getOrderDetail();
  },
  computed: {
    addreInfo() {
      const Info = [];
      let addinfo = "";
      for (let i in this.shippingVo) {
        if (this.shippingVo[i]) Info.push(this.shippingVo[i]);
        addinfo = Info.join("--");
      }

      return addinfo;
    },
  },
  // shippingVo:
  // receiverAddress: "珠江路"
  // receiverCity: "北京"
  // receiverDistrict: "河北"
  // receiverMobile: "13611112222"
  // receiverName: "11"
  // receiverPhone: null
  // receiverProvince: "北京"
  // receiverZip: "111111"
  methods: {
    getOrderDetail() {
      requests.get(`/orders/${this.orderId}`).then((res) => {
        console.log(res);
        this.shippingVo = res.data.shippingVo;
        this.orderDetail = res.data.orderItemVoList;

        this.payment = res.data.payment;
        let item = this.shippingVo;
        this.addressInfo = `${item.receiverName}--${item.receiverMobile}--${item.receiverProvince}--${item.receiverCity}--${item.receiverDistrict}--${item.receiverAddress}--${item.receiverZip}`;
      });
    },

    paySubmit(paytype) {
      // 阿里支付
      if (paytype == 1) {
        this.payType = 1;
        window.open("/order/alipay?orderId=" + this.orderId, "_blank");
      } else {
        this.payType = 2;
        requests
          .post("/pay", {
            orderId: this.orderId,
            orderName: "Vue高仿小米商城",
            amount: 0.01,
            payType: 2,
          })
          .then((res) => {
            this.content = res.data.content;
            // 设置渲染时间，表单的第一个 // <script>document.getElementById('bestPayForm').submit()
            qrcode
              .toDataURL(res.data.content)
              .then((url) => {
                this.showPayWX = true;
                this.payImg = url;
                this.loopOrderState();
              })
              .catch(() => {
                this.$message.error("微信二维码生成失败，请稍后重试");
              });
          });
      }
    },
    close() {
      this.showPayWX = false;
      this.showPayModal = true;
      clearInterval(this.T);
    },
    // 轮询当前订单支付状态
    loopOrderState() {
      this.T = setInterval(() => {
        requests.get(`/orders/${this.orderId}`).then((res) => {
          console.log(res);
          if (res.data.status == 20) {
            this.$message.error("未支付");
          } else if (res.data.status == 10) {
            //   如果已经支付，清楚轮询，并跳转到支付了列表
            clearInterval(this.T);
            this.$message.success("支付成功");
            this.$router.push("/order/list");
          }
        });
      }, 1000);
    },
    submit() {
      this.loopOrderState();
    },

    // this.$router.push({
    // name:"alipay",
    //   params:{
    //         id: this.orderId,
    //   },
    //   query: {
    //     orderId: this.orderId,
    //   },
    // });
    //     this.$router.push({
    // name:"alipay",
    //  params: {
    //     id: this.orderId,
    //   },
    // });
  },
};
</script>

<style lang="scss" scoped>
.order-pay {
  background-color: #f5f5f5;
  padding-top: 30px;
  padding-bottom: 61px;
  .order-wrap {
    padding: 62px 50px;
    background-color: #fff;
    font-size: 14px;
    margin-bottom: 30px;
    .item-order {
      display: flex;
      align-items: center;
      .icon-succ {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: url("../../../../public//imgs/icon-gou.png") #80c58a
          no-repeat center;
        background-size: 60px;
        margin-right: 40px;
      }
      .order-info {
        margin-right: 248px;
        h2 {
          font-size: 24px;
          color: #333333;
          margin-bottom: 20px;
        }
        p {
          color: #666666;
          span {
            color: #ff6700;
          }
        }
      }
      .order-total {
        & > p:first-child {
          margin-bottom: 30px;
        }
        span {
          font-size: 28px;
          color: #ff6700;
        }
        .icon-down {
          display: inline-block;
          width: 14px;
          height: 10px;
          background: url("../../../../public//imgs/icon-down.png") no-repeat
            center;
          background-size: contain;
          margin-left: 9px;
          transition: all 0.5s;
          cursor: pointer;
          &.up {
            transform: rotate(180deg);
          }
        }
      }
    }
    .item-detail {
      border-top: 1px solid #d7d7d7;
      padding-top: 47px;
      padding-left: 130px;
      font-size: 14px;
      margin-top: 45px;
      .item {
        margin-bottom: 19px;
        display: flex;
        .detail-title {
          width: 10%;
          color: hotpink;
          display: inline-block;
        }
        .detail-info {
          display: inline-block;

          img {
            width: 30px;
          }
        }
      }
    }
  }
  .item-pay {
    padding: 26px 50px 72px;
    background-color: #ffffff;
    color: #333333;
    h3 {
      font-size: 20px;
      font-weight: 200;
      color: #333333;
      padding-bottom: 24px;
      border-bottom: 1px solid #d7d7d7;
      margin-bottom: 26px;
    }
    .pay-way {
      font-size: 18px;
      .pay {
        display: inline-block;
        width: 188px;
        height: 64px;
        border: 1px solid #d7d7d7;
        cursor: pointer;
        &:last-child {
          margin-left: 20px;
        }
        &.checked {
          border: 1px solid #ff6700;
        }
      }
      .pay-ali {
        background: url("../../../../public//imgs/pay/icon-ali.png") no-repeat
          center;
        background-size: 103px 38px;
        margin-top: 19px;
      }
      .pay-wechat {
        background: url("../../../../public//imgs/pay/icon-wechat.png")
          no-repeat center;
        background-size: 103px 38px;
      }
    }
  }
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ff4640;
  color: #fff;
}
</style>
